<header class="layui-header layui-bg-cyan">

    {{if .Site.Params.logo}}
        <a href=""><img src="{{.Site.Params.logo}}" class="layui-nav-img" style="margin-left:10px;margin-top:-10px"></a>
    {{end}}
    
    <a class="nav-self-logo" href="/">
        {{.Site.Title}}
    </a>

    <ul class="layui-nav layui-layout-right layui-bg-cyan" lay-filter="">
        <!-- For Desktop -->
        <!--<li class="layui-nav-item" id="nav_big"><a href="/">Home</a></li>-->
        <li class="layui-nav-item" id="nav_big"><a href="/post/">Posts</a></li>
        <!-- <li class="layui-nav-item" id="nav_big"><a href="/gallery/">Gallery</a></li> -->

        {{ if .Site.Menus.main }}
            {{ range sort .Site.Menus.main }}
                <li class="layui-nav-item" id="nav_big"><a href="{{ .URL }}">{{ .Name }}</a></li>
            {{ end }}
        {{ end }}

        <!-- For Mobile -->
        <li class="layui-nav-item" id="nav_small">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-app" style="font-size: 24px;"></i>
            </a>

            <dl class="layui-nav-child">
                <!--<dd><a href="/">Home</a></dd>-->
                <dd><a href="/post/">Posts</a></dd>
                <!--<dd><a href="/gallery/">Gallery</a></dd>-->

                {{ if .Site.Menus.main }}
                    {{ range sort .Site.Menus.main }}
                        <dd><a href="{{ .URL }}">{{ .Name }}</a></dd>
                    {{ end }}
                {{ end }}
            </dl>
        </li>
    </ul>
</header>

<script>
layui.use('element', function(){
  var element = layui.element;
});
</script>